<template>
	<div class="system-sys-container">
		<el-card shadow="hover" header="系统信息" style="margin: 5px">
			<el-form :inline="false" size="mini">
				<el-form-item label-width="130px" label="系统中文简称">
					<el-input type="text" v-model="CnShort" placeholder="请输入..."></el-input>
				</el-form-item>
				<el-form-item label-width="130px" label="系统中文全称">
					<el-input type="text" v-model="CnName" placeholder="请输入..."></el-input>
				</el-form-item>
				<el-form-item label-width="130px" label="系统英文名称">
					<el-input type="text" v-model="English" placeholder="请输入..."></el-input>
				</el-form-item>
				<el-form-item label="系统Logo（64x64）" label-width="130px">
					<el-upload
						:action="UploadOnlyUrl"
						:file-list="imgData"
						:disabled="imgData.length > 0"
						:headers="customsHeaders"
						list-type="picture-card"
						:auto-upload="true"
						:limit="1"
						:multiple="false"
						:on-success="onSuccess"
					>
						<template #default>
							<i class="el-icon-plus"></i>
						</template>
						<template #file="{ file }">
							<el-image ref="previewRef" :src="file.url" :preview-src-list="previewImgs"></el-image>
							<div>
								<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
								<span class="el-upload-list__item-actions">
									<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
										<i class="el-icon-zoom-in"></i>
									</span>
									<span class="el-upload-list__item-delete" @click="handleRemove(file)">
										<i class="el-icon-delete"></i>
									</span>
								</span>
							</div>
						</template>
					</el-upload>
					<el-dialog v-model="dialogVisible">
						<img width="100%" :src="Logo" alt="" />
					</el-dialog>
				</el-form-item>
				<el-form-item label-width="130px" label="系统简介">
					<el-input type="textarea" v-model="Intro" placeholder="请输入..."></el-input>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card shadow="hover" header="环境设置" style="margin: 5px">
			<div>
				<el-radio v-model="EnvType" label="1" size="medium">COM口</el-radio>
				<el-radio v-model="EnvType" label="2" size="medium">网口</el-radio>
			</div>
		</el-card>

		<el-row justify="left" style="padding-left: 130px; padding-top: 50px">
			<el-button type="primary" icon="el-icon-check" @click="temporaryAdd" size="medium">保 存</el-button>
		</el-row>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs, ref, computed } from 'vue';
import { ElMessageBox } from 'element-plus';
import { Session } from '/@/utils/storage';
import { saveSystemConfig, querySystemConfig } from '/@/api/common/index';
import { UploadOnlyUrl } from '/@/common';

export default {
	name: 'systemSys',
	components: {},
	setup() {
		const previewRef = ref();
		var state = reactive({
			CnShort: '',
			CnName: '',
			English: '',
			Logo: '',
			Intro: '',
			EnvType: '',
			dialogVisible: false,
			previewImgs: [],
			imgData: [],
		});
		querySystemConfig().then((res) => {
			state.CnName = res.data.cnName;
			state.CnShort = res.data.cnShort;
			state.English = res.data.english;
			state.Intro = res.data.intro;
			state.EnvType = res.data.envType;
			state.Logo = res.data.logo;
			if (res.data.logo) {
				state.imgData.push({ url: res.data.logo });
			}
		});
		const temporaryAdd = function () {
			if (!state.CnName) {
				ElMessageBox.alert('请输入系统名称！');
				return;
			}
			saveSystemConfig(state).then((res) => {
				if (res.success) {
					ElMessageBox.alert('保存成功');
				} else {
					ElMessageBox.alert('保存失败');
				}
			});
		};
		const customsHeaders = computed(() => {
			return {
				Authorization: `Bearer ${Session.get('token')}`,
			};
		});
		function onSuccess(resp, file, fileList) {
			if (resp.success) {
				state.Logo = resp.data;
			}
		}
		const handleRemove = (file: any) => {
			ElMessageBox.confirm('此操作将永久删除, 是否继续?', '提示', {
				confirmButtonText: '删除',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					state.imgData = [];
				})
				.catch(() => {});
		};
		const handlePictureCardPreview = (file) => {
			state.previewImgs = [];
			state.previewImgs.push(file.url);
			previewRef.value.showViewer = true;
		};
		return {
			handlePictureCardPreview,
			temporaryAdd,
			UploadOnlyUrl,
			onSuccess,
			customsHeaders,
			handleRemove,
			previewRef,
			...toRefs(state),
		};
	},
};
</script>
<style>
.el-upload-list__item .el-icon-close {
	display: block !important;
	color: white;
	top: 10px;
	right: 10px;
}
</style>
